<template>
	<view>
		<view class="card-content">
			<view class="vip-item" v-if="viewCard">
				您没有会员卡呢 赶快去开通一个吧
			</view>
			<view class="card-list">
				<view class="card-item" v-for="(item,index) in vipCardList" :key="index">
					<view class="top-title">
						<view class="card-bianhao">
							卡号：{{item.name}}
						</view>
						<view class="left-item">
							余额：{{item.yue }}
						</view>
					</view>
					<view class="cente">
						<p class="left">场馆：{{item.venue_name}}</p>
						<p class="right">VIP</p>
					</view>

					<view class="btn-content">
						<view class="" @click="goToVipCardPayView(item.venue_id)">
							充值
						</view>
						<view class="p">

						</view>
						<view class="" @click="gotoItem(item.venue_id)">
							消费记录
						</view>
						<view class="p">

						</view>
						<view class="" @click="checkTuikuan()">
							退款
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getVipCard,
		getOpenId,
		getVipPay
	} from '../../api/api.js'

	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		ref,
		computed,
		reactive
	} from 'vue';

	const vipData = reactive({
		money: 0,
		isVip: false,
		title: '用户',
	})

	const vipCardList = ref([])
	const viewCard = ref(true)


	// 获取卡片列表
	const _getVipCard = () => {
		uni.getStorage({
			key: 'openid',
			success: function(res) {
				getVipCard(res.data.openid).then((res3) => {
					console.log('卡片列表',res3);
					vipCardList.value = res3.values
					if (res3.values) {
						viewCard.value = false
					}
				})
			}
		});
	}
	


	// 跳转充值页面
	const goToVipCardPayView = (changguanId) => {
		uni.navigateTo({
			url: `/views/registeredVipView/registeredVipView?changdiId=${changguanId}`
		})
	}


	// 显示退款按钮
	const checkTuikuan = () => {
		uni.showModal({
			title: '退款提示',
			content: '请联系商家进行退款操作',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}

	// 跳转支付记录页面
	const gotoItem = (changguanid) => {
		console.log(changguanid);
		uni.navigateTo({

			url: `/views/vipCardHistory/vipCardHistory?changuanid=${changguanid}`
		});
	}

	onLoad(() => {
		_getVipCard()
	})
</script>

<style lang="scss" scoped>
	.card-content {
		.vip-item {
			padding: 40px;
			text-align: center;
		}

		.card-list {
			padding: 20px;

			.card-item {
				padding: 20px;
				border-radius: 20px;
				border: 1px solid gainsboro;
				background-image: url('../../static/vipCard1.jpg');
				background-size: cover;
				/* 使背景图像覆盖整个元素 */
				background-position: center;
				/* 使背景图像居中 */
				background-repeat: no-repeat;
				/* 防止背景图像重复 */

				.top-title {
					display: flex;
					justify-content: space-between;
					font-size: 14px;
				}

				.cente {
					display: flex;
					justify-content: space-between;
					padding: 30px 0;

					.right {
						font-weight: 700;
						color: white;
						font-size: 28px;
					}
				}



				.btn-content {
					margin-top: 10px;
					display: flex;
					justify-content: space-around;
					font-weight: 700;
					color: white;

					.left {
						line-height: 22px;
					}

					.p {
						height: 22px;
						width: 1px;
						background-color: white;
					}
				}
			}
		}
	}
</style>